import {Component, OnInit, AfterViewInit, OnDestroy, ViewChild} from '@angular/core';
import {AmapGeocoderService, AmapGeocoderWrapper} from 'ngx-amap';


@Component({
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.less']
})
export class MapComponent implements OnInit {

    @ViewChild('map', {static: true}) map;

    markers = [];
    zoom = 4;
    private plugin: Promise<AmapGeocoderWrapper>;
    amapTextPosition = [116.397428, 39.90923];
    amapTextContent = '';
    amapTextHidden = true;

    constructor(private AmapGeocoder: AmapGeocoderService) {
    }

    ngOnInit() {
        this.markersInit();
        this.plugin = this.AmapGeocoder.of();
    }

    markersInit() {
        this.markers = [
            {
                unifyCode: 'cf121212',
                germplasmShape: '种子',
                germplasmType: '引进资源',
                familyName: '鸢尾科',
                familyLatinName: 'Iridaceae',
                genusName: '鸢尾属',
                genusLatinName: 'Iris',
                speciesName: '（蓝花）喜盐鸢尾',
                academicName: 'Irishalophila',
                longitude: 130,
                latitude: 30,
                wholeImg: '',
                flowersFruitsImg: '',
                seedImg: '',
                color: '#3993f8',
                label: 'label'
            },
            {
                unifyCode: 'cf141',
                germplasmShape: '种子',
                germplasmType: '引进资源',
                familyName: '鸢尾科',
                familyLatinName: 'Iridaceae',
                genusName: '鸢尾属',
                genusLatinName: 'Iris',
                speciesName: '（蓝花）喜盐鸢尾',
                academicName: 'Irishalophila',
                longitude: 131,
                latitude: 30,
                wholeImg: '',
                flowersFruitsImg: '',
                seedImg: '',
                color: '#3993f8',
                label: 'label'
            }
        ];
    }

    setMarkerColor(color: string = '#3993f8'): string {
        return `<svg t="1554975883934" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2378" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="50"><defs><style type="text/css"></style></defs>
<path d="M520.7 99c-148.5 0-268.9 120.4-268.9 268.9S519 890.4 519 890.4s270.5-374 270.5-522.5S669.2 99 520.7 99z m0 342.8c-48.2 0-87.3-39.1-87.3-87.3s39.1-87.3 87.3-87.3 87.3 39.1 87.3 87.3-39.1 87.3-87.3 87.3z" p-id="2379" fill="${color}"></path>
</svg>`;
    }

    markerClick() {
        this.amapTextHidden = true;
    }

    markerMouseOver(position: number[]) {
        this.amapTextHidden = false;
        this.amapTextPosition = position;
        this.amapTextContent = `经度:${position[0]}<br>纬度:${position[1]}`;
    }

    markerMouseOut() {
        this.amapTextHidden = true;
    }

    mapReady($event) {
        $event.setZoom(4); // 这里地图准备好以后重设一次zoom是为了解决地图刚渲染完成点坐标不会自动聚合的问题
    }
}
